<template>
  <div class="center">
    <!--banner轮播-->
    <Carsousel :list="bannerList" />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  data() {
    return {
      currentIndex: "",
    };
  },
  mounted() {
    //mounted:组件挂载完毕，正常说组件结构（DOM）已经全有了
    //为什么swiper实例在mounted当中直接书写不可以：因为结构还没有完整
    this.$bus.$on("changeIndex", (data) => {
      this.currentIndex = data;
    });
    // 挂载时发一次请求
    this.$store.dispatch("getBannerList", this.currentIndex);
  },
  watch: {
    // 每次索引值改变currentIndex，都要重新发送请求
    currentIndex() {
      this.$store.dispatch("getBannerList", this.currentIndex);
    },
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  },
};
</script>

<style scoped lang="less">

</style>
